<template>
    <div class="dly"> 
        <p class="nav"><router-link tag="i" class="iconfont icon-left-" to="/orderform">登录</router-link><router-link tag="span" to="/mimadl">密码登录</router-link></p>
        <form class="form">
            <label class="sjh"><input name="sjh" type="text" placeholder="手机号"><input type="button" value="获取验证码"></label>
            <input type="text" name="yzm" placeholder="验证码">
        </form>
        <p class="wxts">温馨提示：未注册饿了么账号的手机号,登录时经自动注册,且代表您已同意<span>《用户服务协议》</span></p>
        <button id="btn">登录</button>
        <p class="dsf">第三方登录</p>
        <ul class="list">
            <li><span><img src="../assets/image/wx.png" alt=""></span><br>微信</li>
            <li><span><img src="../assets/image/qq.png" alt=""></span><br>QQ</li>
            <li><span><img src="../assets/image/xl.png" alt=""></span><br>微博</li>
            <li><span><img src="../assets/image/tb-1.png" alt=""></span><br>淘宝</li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
    .dly{
        background: #f5f5f5;
        height: 100vh;
        .nav{
            background: #009cff;
            display: flex;
            justify-content: space-between;
            padding: 0.36rem;
            color: #fff;
            span{
                font-size: 0.36rem;
            }  
        }
        #btn{
            margin-top: 0.9rem;
            width: 100%;
            height: 1.5rem;
            font-size: 0.6rem;
            color: #fff;
            background: #4dc160;
        }
    }
    .form{
        margin-top: 0.4rem;
        height: 3rem;
        font-size:0; 
        .sjh{
            display: flex;
            input[name='sjh']{
                flex: 3;
                height: 1.2rem;
                padding: 0rem 0.2rem;
                background: #ffffff;
            }
            input[type='button']{
                height: 1.3rem;
                flex: 1;
                padding: 0 0.4rem;
                border: none;
                background: #ccc;
                outline: none;
            }
        }
        input[name="yzm"]{
            height: 1.2rem;
            width: 100%;
            background: #fff;
            box-sizing: border-box;
            padding-left: 0.3rem;
        }
    }
    .wxts{
            font-size: 0.34rem;
            display: block;
            padding: 0 0.3rem;
            line-height: 0.55rem;
            span{
                color: #2ea6e3;
            }
        }
    .dsf{
        margin-top: 6rem;
        text-align: center;
        font-size: 0.36rem;
        color: #ccc;
    }  
    .list{
        margin-top: 0.4rem; 
        display: flex;
        justify-content: space-between;
        height: 2.4rem;
        background: #f5f5f5;
        li{
            text-align: center;
            font-size: 0.3rem;
            &:last-child{
                margin-right: 0.4rem; 
            }
            &:first-child{
                margin-left: 0.4rem;
            }
            span{
                display: block;
                width: 1.24rem;
                height: 1.24rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }  
    #app{
        padding-bottom: 0; 
    }
</style>
